
<script src="/js/visualization/setsearchfilter.js"></script>

<style>
.clsdateslider{
    padding: 0px;
    background: none;
    background-color: white;
    border: solid 1px #75a6be;
                 float: left;
		clear: left;
                width: 90%;
		margin-left: 10px;
                
                


}
.clsdateslider .ui-slider-range { background: #75a6be; }
	.clsdateslider .ui-slider-handle { border-color: #d1d2d2;  height: 35px}
</style>
<script type="text/javascript">





var minDate;
var maxDate;
var slider;
var startDate;
var endDate;


$(function(){



if(Flag_Search_Panel_Status=="BIO")
  {
$('#datepickerstartBIO').val($.datepicker.formatDate('mm/dd/yy',  new Date($('#datepickerstartBIO').val())));
$('#datepickerendBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#datepickerendBIO').val())));
$('#hddatepickerstartBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#hddatepickerstartBIO').val())));
$('#hddatepickerendBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#hddatepickerendBIO').val())));
 minDate = new Date($('#hddatepickerstartBIO').val());
 maxDate = new Date($('#hddatepickerendBIO').val());
  }
else if(Flag_Search_Panel_Status=="NONBIO")
{
$('#datepickerstartNONBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#datepickerstartNONBIO').val())));
$('#datepickerendNONBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#datepickerendNONBIO').val())));
$('#hddatepickerstartNONBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#hddatepickerstartNONBIO').val())));
$('#hddatepickerendNONBIO').val($.datepicker.formatDate('mm/dd/yy', new Date($('#hddatepickerendNONBIO').val())));
minDate = new Date($('#hddatepickerstartNONBIO').val());
maxDate = new Date($('#hddatepickerendNONBIO').val());
}
setSlider();
});


function setSlider()
{
   if(Flag_Search_Panel_Status=="BIO")
  { startDate = $('#datepickerstartBIO').datepicker({minDate: minDate, maxDate: maxDate,
            onSelect: function(dateStr) { resync(); }}).
        keyup(function() { resync(); });
    endDate = $('#datepickerendBIO').datepicker({minDate: minDate, maxDate: maxDate,
            onSelect: function(dateStr) { resync(); }}).
        keyup(function() { resync(); });
    slider = $('#clsdatesliderBIO').slider({range: true, values:[0,maxDate],max: daysDiff(minDate, maxDate),
            slide: function(event, ui) { resync(ui.values); },change: function(event, ui) { reloadsearchaction(); }});
    }
    else if(Flag_Search_Panel_Status=="NONBIO")
  { startDate = $('#datepickerstartNONBIO').datepicker({minDate: minDate, maxDate: maxDate,
            onSelect: function(dateStr) { resync(); }}).
        keyup(function() { resync(); });
    endDate = $('#datepickerendNONBIO').datepicker({minDate: minDate, maxDate: maxDate,
            onSelect: function(dateStr) { resync(); }}).
        keyup(function() { resync(); });
    slider = $('#clsdatesliderNONBIO').slider({range: true, values:[0,maxDate],max: daysDiff(minDate, maxDate),
            slide: function(event, ui) { resync(ui.values); },change: function(event, ui) { reloadsearchaction(); }});
    }
}

function resync(values) {
    if(Flag_Search_Panel_Status=="BIO")
        {startDate=$('#datepickerstartBIO');
        endDate=$('#datepickerendBIO');
        slider=$('#clsdatesliderBIO');
         minDate = new Date($('#hddatepickerstartBIO').val());
         maxDate = new Date($('#hddatepickerendBIO').val());
        }
    else if(Flag_Search_Panel_Status=="NONBIO")
        {startDate=$('#datepickerstartNONBIO');
        endDate=$('#datepickerendNONBIO');
        slider=$('#clsdatesliderNONBIO');
        minDate = new Date($('#hddatepickerstartNONBIO').val());
         maxDate = new Date($('#hddatepickerendNONBIO').val());
        }

    if (values) {//alert(startDate)
        var date = new Date(minDate.getTime());
        date.setDate(date.getDate() + values[0]);
        startDate.val($.datepicker.formatDate('mm/dd/yy', date));
        date = new Date(minDate.getTime());
        date.setDate(date.getDate() + values[1]);
        endDate.val($.datepicker.formatDate('mm/dd/yy', date));
    }
    else {
        var start = daysDiff(minDate, startDate.datepicker('getDate') || minDate);
        var end = daysDiff(minDate, endDate.datepicker('getDate') || maxDate);
        start = Math.min(start, end);
        slider.slider('values', 0, start);
        slider.slider('values', 1, end);
    }
    startDate.datepicker('option', 'maxDate', endDate.datepicker('getDate') || maxDate);
    endDate.datepicker('option', 'minDate', startDate.datepicker('getDate') || minDate);
}

function daysDiff(d1, d2) {
    return  Math.floor((d2.getTime() - d1.getTime()) / 86400000);
}


</script>

<ul id="sddm">

    <li><a style="background:none; background-color: transparent; width: 90px; color: #7a7a7a;font-style: italic "  class="liclass"
        onmouseover="mopen('close<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Filters</a>

                 </li>

<?php if (count($searchfilterlocation)>0): ?>
     <li><a class="liclass" 
        onmouseover="mopen('m1<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Location</a>
        <div class="divclass" id="m1<?php echo $Datatype ?>"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <?php foreach($searchfilterlocation as $r): ?>
        <a class="lidivclass"><input type="checkbox" checked="true" onclick="reloadsearchaction();" name="chklocationfilter" id="<?php echo $r["id"] ?>"><?php  echo $r["location"]?></a>
        <?php endforeach ?>

        </div>
    </li>

<?php endif ?>



<?php if (count($searchfiltertags)>0): ?>

     <li><a class="liclass" 
        onmouseover="mopen('m2<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Tags</a>
         <div style="width: 350px" class="divclass" id="m2<?php echo $Datatype ?>"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <?php foreach($searchfiltertags as $r): ?>
        <a class="lidivclass" ><input type="checkbox" checked="true" onclick="reloadsearchaction();" name="chktagsfilter" id="<?php echo $r["id"] ?>" value="<?php echo $r["tag"] ?>"><?php  echo $r["tag"]?></a>
        <?php endforeach ?>

        </div>
    </li>
<?php endif ?>





<?php if (count($searchfilterdepths)>0): ?>

 <li><a class="liclass" 
        onmouseover="mopen('m3<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Depths</a>
        <div class="divclass" id="m3<?php echo $Datatype ?>"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">

            <?php foreach($searchfilterdepths as $r): ?>

            <a class="lidivclass" ><input type="checkbox" checked="true" onclick="reloadsearchaction();" name="chkdepthsfilter" id="<?php echo $r["id"] ?>" value="<?php echo $r["observationdepth"] ?>">
            <?php echo $r["observationdepth"] ?></a>
            <?php endforeach; ?>
        </div>
    </li>
<?php endif ?>

<?php if (count($searchfilterunits)>0): ?>
        <li><a class="liclass" 
        onmouseover="mopen('m4<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Units</a>
         <div class="divclass" id="m4<?php echo $Datatype ?>"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <?php foreach($searchfilterunits as $r): ?>
        <a class="lidivclass" ><input type="checkbox" checked="true" onclick="reloadsearchaction();" name="chkunitsfilter" id="<?php echo $r["id"] ?>">
        <?php echo $r["unit"] ?></a>

        <?php endforeach ?>
   </div>
    </li>
<?php endif ?>



<?php if (count($searchfiltercontributor)>0): ?>

    <li><a class="liclass" 
        onmouseover="mopen('m5<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Contributor</a>
         <div class="divclass" id="m5<?php echo $Datatype ?>"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
        <?php foreach($searchfiltercontributor as $r): ?>
         <a class="lidivclass" ><input type="checkbox" checked="true" onclick="reloadsearchaction();" name="chkcontributorsfilter" id="<?php echo $r["id"] ?>">
            <?php echo $r["firstname"] ?></a>
                    <?php endforeach ?>

	 </div>
    </li>
<?php endif ?>

<?php if (count($searchfilterdates)>0): ?>
         <li><a class="liclass" 
        onmouseover="mopen('m6<?php echo $Datatype ?>')"
        onmouseout="mclosetime()">Date</a>
        <div class="divclass" id="m6<?php echo $Datatype ?>"
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">

            <table>
                <tr style="height: 40px"><td  colspan="2">
                        Set Time using slider:
                    </td></tr>
                <tr><td colspan="2">
                        <?php if ($Datatype=="BIO"): ?>
                        <div id="clsdatesliderBIO" class="clsdateslider" style="height: 30px"></div>
                        <?php endif ?>
                        <?php if ($Datatype=="NONBIO"): ?>
                        <div id="clsdatesliderNONBIO" class="clsdateslider" style="height: 30px"></div>
                        <?php endif ?>
                    </td>
                </tr>
                <tr style="height: 40px"><td>
                        From:
                    </td>
                    <td>
                        <?php if ($Datatype=="BIO"): ?>
                        <input id="datepickerstartBIO" type="text" style="width: 90%;height: 20px; border: none; text-align: center" name="fromdate" value="<?php echo $searchfilterdates[0]->getMindate() ?>">
                        <input id="hddatepickerstartBIO" type="hidden" style="width: 90%;height: 20px; border: none; text-align: center" name="hdfromdate" value="<?php echo $searchfilterdates[0]->getMindate() ?>">
                        <?php endif ?>
                        <?php if ($Datatype=="NONBIO"): ?>
                        <input id="datepickerstartNONBIO" type="text" style="width: 90%;height: 20px; border: none; text-align: center" name="fromdate" value="<?php echo $searchfilterdates[0]->getMindate() ?>">
                        <input id="hddatepickerstartNONBIO" type="hidden" style="width: 90%;height: 20px; border: none; text-align: center" name="hdfromdate" value="<?php echo $searchfilterdates[0]->getMindate() ?>">
                        <?php endif ?>
                    </td>
                </tr>
                <tr style="height: 40px"><td>
                        To:
                    </td>
                    <td>
                        <?php if ($Datatype=="BIO"): ?>
                        <input id="datepickerendBIO" type="text" style="width: 90%;height: 20px; border: none; text-align: center" name="todate" value="<?php echo $searchfilterdates[0]->getMaxdate() ?>">
                        <input id="hddatepickerendBIO" type="hidden" style="width: 90%;height: 20px; border: none; text-align: center" name="hdtodate" value="<?php echo $searchfilterdates[0]->getMaxdate() ?>">
                        <?php endif ?>
                        <?php if ($Datatype=="NONBIO"): ?>
                        <input id="datepickerendNONBIO" type="text" style="width: 90%;height: 20px; border: none; text-align: center" name="todate" value="<?php echo $searchfilterdates[0]->getMaxdate() ?>">
                        <input id="hddatepickerendNONBIO" type="hidden" style="width: 90%;height: 20px; border: none; text-align: center" name="hdtodate" value="<?php echo $searchfilterdates[0]->getMaxdate() ?>">
                        <?php endif ?>
                    </td>
                </tr>
            </table>

            
            

        </div>
    </li>
<?php endif ?>


    <li><a style="background:none; background-color: transparent; width: 20px" onclick="if(Flag_Search_Panel_Status=='BIO'){bioFilterWindow=false;} else if(Flag_Search_Panel_Status=='NONBIO'){nonbioFilterWindow=false;} showhideFilter(false)" class="liclass" 
        onmouseover="mopen('close<?php echo $Datatype ?>')"
        onmouseout="mclosetime()"><img src="/images/close.png" /></a>
        
                 </li>

</ul>

